<template>
  <div>
    <!--component/goods/goods.wxml-->
    <div class="ul">
      <div
        class="li"
        v-for="item in goodsList"
        :key="item.id"
        :data-id="item.id"
        @click="goDetails(item.id)"
      >
        <img :src="item.list_pic_url" mode="widthFix" />
        <div class="title">{{ item.name }}</div>
        <div class="price">{{ item.retail_price.toFixed(2) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["goodsList"],
  data() {
    return {};
  },
  methods:{
      goDetails(id){
        
      // this.$router.push(`/details?id=${id}`)
      this.$emit("addN",id)
  }
  }
};
</script>
 
<style lang = "less" scoped>
.ul {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  .li {
    width: 50%;
    img{
      width: 100%;
      display: block;
    }
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .price {
      color: rgb(189, 86, 86);
    }
  }
}
</style>